<template>
    <div class="count">
        <h2>当前求和为: {{ sum }}, 10倍的数字是:{{ countStore.bigSum() }}, 100倍的数字是:{{ countStore.bigBigSum() }}</h2>
        <!-- v-model.number 将绑定结果尝试转换为数字类型 -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>

<script setup lang="ts" name="Count">
    import {ref,toRefs} from 'vue'
    import {useCountStore} from '../store/count'
    import { storeToRefs } from 'pinia';

    // countStrore是一个reactive对象
    const countStore = useCountStore()
    
    // countStore.sum是一个ref对象，但是因为他是在reactive对象中，所以在取值时无需调用.value
    console.log(countStore.sum)
    
    // storeToRefs相对于toRefs，他不会把store中非数据相关的元素转换为响应式，只会将用户的数据模块转换为响应式
    const {sum} = storeToRefs(countStore)
    console.log('storeToRefs', storeToRefs(countStore))
    console.log('toRefs', toRefs(countStore))

    let n = ref(1)

    function add() {
        // 修改方式一：拿到值直接修改
        // countStore.sum += n.value

        // 修改方式二：调用方法更新整个对象
        // countStore.$patch({
        //     sum:888
        // })

        // 修改方式三：调用pinia中action定义的方法
        countStore.update(n.value)
    }

    function minus() {
        countStore.sum -= n.value
    }
</script>


<style scoped>
.count {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>